<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>银行管理系统</title>
    <style>
        /* ===== 全局样式 ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            transition: all 0.3s ease;
        }
        
        body {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .hidden {
            display: none !important;
        }

        /* ===== 登录界面 ===== */
        #loginContainer {
            width: 100%;
            max-width: 500px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            animation: fadeIn 0.5s ease-out;
        }

        .login-header {
            background: #2c3e50;
            color: white;
            padding: 25px;
            text-align: center;
            font-size: 1.8rem;
            position: relative;
        }

        .role-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            background: #f5f7fa;
        }

        .role-tab {
            flex: 1;
            padding: 18px;
            text-align: center;
            cursor: pointer;
            font-weight: 500;
            color: #7f8c8d;
        }

        .role-tab.active {
            background: white;
            color: #2c3e50;
            border-bottom: 3px solid #3498db;
            font-weight: bold;
        }

        .login-form {
            padding: 30px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 10px;
            color: #555;
            font-weight: bold;
            font-size: 1.1rem;
        }

        .form-group input {
            width: 100%;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1.1rem;
        }

        .form-group input:focus {
            border-color: #3498db;
            outline: none;
            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
        }

        .login-btn {
            width: 100%;
            padding: 14px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1.2rem;
            cursor: pointer;
            font-weight: bold;
            margin-top: 10px;
        }

        .login-btn:hover {
            background: #2980b9;
        }

        .error-message {
            color: #e74c3c;
            font-size: 0.95rem;
            margin-top: 8px;
            display: none;
        }

        /* ===== 主系统界面 ===== */
        #mainSystem {
            width: 100%;
            max-width: 1200px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            display: none;
        }

        header {
            background: #2c3e50;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }

        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .logo i {
            margin-right: 10px;
        }

        .user-area {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .user-info {
            display: flex;
            align-items: center;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #3498db;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            font-weight: bold;
        }

        .logout-btn {
            background: #e74c3c;
            color: white;
            border: none;
            padding: 10px 18px;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
        }

        .logout-btn:hover {
            background: #c0392b;
        }

        /* ===== 主体布局 ===== */
        .main-container {
            display: flex;
            min-height: 600px;
        }

        /* ===== 左侧菜单栏 ===== */
        .sidebar {
            width: 250px;
            background: #34495e;
            color: white;
            padding: 20px 0;
        }

        .sidebar h3 {
            padding: 15px 25px;
            font-size: 1.3rem;
            border-bottom: 1px solid #40576b;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .sidebar h3 i {
            margin-right: 10px;
        }

        .menu {
            list-style: none;
        }

        .menu li {
            margin-bottom: 5px;
        }

        .menu a {
            display: flex;
            align-items: center;
            padding: 15px 25px;
            color: #ecf0f1;
            text-decoration: none;
            border-left: 4px solid transparent;
        }

        .menu a:hover, .menu a.active {
            background: #2c3e50;
            color: white;
            border-left: 4px solid #3498db;
        }

        .menu a i {
            margin-right: 12px;
            font-size: 1.2rem;
        }

        /* ===== 右侧内容区 ===== */
        .content {
            flex: 1;
            padding: 30px;
            background: #f9f9f9;
            min-height: 600px;
        }

        .page-title {
            color: #2c3e50;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid #3498db;
            font-size: 1.8rem;
            display: flex;
            align-items: center;
        }

        .page-title i {
            margin-right: 12px;
        }

        /* ===== 客户管理界面 ===== */
        .search-area {
            display: flex;
            gap: 15px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .search-input {
            flex: 1;
            min-width: 300px;
            padding: 14px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 1.1rem;
        }

        .search-btn, .add-btn {
            padding: 14px 25px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
        }

        .search-btn i, .add-btn i {
            margin-right: 8px;
        }

        .search-btn {
            background: #3498db;
            color: white;
        }

        .search-btn:hover {
            background: #2980b9;
        }

        .add-btn {
            background: #2ecc71;
            color: white;
        }

        .add-btn:hover {
            background: #27ae60;
        }

        /* ===== 表格样式 ===== */
        .data-table-container {
            overflow-x: auto;
            border-radius: 8px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 25px;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 800px;
        }

        .data-table th, .data-table td {
            padding: 16px;
            text-align: left;
            border: 1px solid #e0e0e0;
        }

        .data-table th {
            background: #3498db;
            color: white;
            font-weight: bold;
            font-size: 1.1rem;
        }

        .data-table tr:nth-child(even) {
            background: #f5f7fa;
        }

        .data-table tr:hover {
            background: #e3f2fd;
        }

        .action-btn {
            padding: 8px 15px;
            margin-right: 8px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
            display: inline-flex;
            align-items: center;
        }

        .action-btn i {
            margin-right: 5px;
        }

        .edit-btn {
            background: #f39c12;
            color: white;
        }

        .edit-btn:hover {
            background: #d35400;
        }

        .delete-btn {
            background: #e74c3c;
            color: white;
        }

        .delete-btn:hover {
            background: #c0392b;
        }

        /* ===== 分页导航 ===== */
        .pagination {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .page-btn {
            padding: 10px 16px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 6px;
            cursor: pointer;
            min-width: 45px;
            text-align: center;
        }

        .page-btn:hover, .page-btn.active {
            background: #3498db;
            color: white;
            border-color: #3498db;
        }

        /* ===== 客户操作界面 ===== */
        .customer-dashboard {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
        }

        .account-card {
            background: linear-gradient(135deg, #3498db, #2c3e50);
            color: white;
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .account-number {
            font-size: 1.5rem;
            letter-spacing: 3px;
            margin: 15px 0;
        }

        .account-balance {
            font-size: 2.2rem;
            font-weight: bold;
            margin: 20px 0;
        }

        .operation-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 20px;
        }

        .operation-btn {
            flex: 1;
            min-width: 150px;
            padding: 15px;
            border: none;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .operation-btn i {
            font-size: 2rem;
            margin-bottom: 12px;
        }

        .operation-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
        }

        /* ===== 动画效果 ===== */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ===== 响应式设计 ===== */
        @media (max-width: 900px) {
            .main-container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                padding: 15px 0;
            }
            
            .menu {
                display: flex;
                overflow-x: auto;
                padding: 0 15px;
            }
            
            .menu li {
                flex-shrink: 0;
            }
            
            .menu a {
                padding: 12px 20px;
            }
            
            .search-area {
                flex-direction: column;
            }
            
            .search-input, .search-btn, .add-btn {
                width: 100%;
            }
            
            .operation-buttons {
                flex-direction: column;
            }
        }

        @media (max-width: 600px) {
            .user-area {
                flex-direction: column;
                align-items: flex-end;
            }
            
            .user-info span {
                display: none;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- ========== 登录界面 ========== -->
    <div id="loginContainer">
        <div class="login-header">
            <i class="fas fa-university"></i> 银行管理系统
        </div>
        
        <div class="role-tabs">
            <div class="role-tab active" id="adminTab">
                <i class="fas fa-user-cog"></i> 管理员登录
            </div>
            <div class="role-tab" id="customerTab">
                <i class="fas fa-user"></i> 客户登录
            </div>
        </div>
        
        <div class="login-form">
            <div class="form-group">
                <label for="username"><i class="fas fa-user"></i> 用户名</label>
                <input type="text" id="username" placeholder="请输入用户名">
                <div class="error-message" id="usernameError"></div>
            </div>
            
            <div class="form-group">
                <label for="password"><i class="fas fa-lock"></i> 密码</label>
                <input type="password" id="password" placeholder="请输入密码">
                <div class="error-message" id="passwordError"></div>
            </div>
            
            <button class="login-btn" id="loginBtn">
                <i class="fas fa-sign-in-alt"></i> 登录
            </button>
        </div>
    </div>

    <!-- ========== 主系统界面 ========== -->
    <div id="mainSystem">
        <!-- 顶部导航栏 -->
        <header>
            <div class="logo">
                <i class="fas fa-university"></i> 银行管理系统
            </div>
            <div class="user-area">
                <div class="user-info">
                    <div class="user-avatar" id="userAvatar">A</div>
                    <span id="userName">管理员</span>
                </div>
                <button class="logout-btn" id="logoutBtn">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </button>
            </div>
        </header>

        <!-- 主体内容 -->
        <div class="main-container">
            <!-- 左侧菜单栏 -->
            <div class="sidebar">
                <h3 id="roleTitle"><i class="fas fa-bars"></i> 管理员模块</h3>
                <ul class="menu" id="sideMenu">
                    <!-- 管理员菜单 -->
                    <li><a href="#" class="active" data-page="customerManagement"><i class="fas fa-users"></i> 客户管理</a></li>
                    <li><a href="#" data-page="cardManagement"><i class="fas fa-credit-card"></i> 银行卡管理</a></li>
                    <li><a href="#" data-page="depositManagement"><i class="fas fa-piggy-bank"></i> 存款业务管理</a></li>
                    <li><a href="#" data-page="transactionManagement"><i class="fas fa-exchange-alt"></i> 交易管理</a></li>
                    <li><a href="#" data-page="reportManagement"><i class="fas fa-chart-bar"></i> 统计报表</a></li>
                    
                    <!-- 客户菜单 (默认隐藏) -->
                    <li class="hidden" data-role="customer"><a href="#" data-page="accountDashboard"><i class="fas fa-home"></i> 账户概览</a></li>
                    <li class="hidden" data-role="customer"><a href="#" data-page="depositPage"><i class="fas fa-money-bill-wave"></i> 存款</a></li>
                    <li class="hidden" data-role="customer"><a href="#" data-page="withdrawPage"><i class="fas fa-hand-holding-usd"></i> 取款</a></li>
                    <li class="hidden" data-role="customer"><a href="#" data-page="transferPage"><i class="fas fa-exchange-alt"></i> 转账</a></li>
                    <li class="hidden" data-role="customer"><a href="#" data-page="accountInfo"><i class="fas fa-info-circle"></i> 账户信息</a></li>
                </ul>
            </div>
            
            <!-- 右侧内容区域 -->
            <div class="content">
                <!-- 管理员页面：客户管理 -->
                <div id="customerManagement">
                    <h2 class="page-title"><i class="fas fa-users"></i> 客户管理</h2>
                    
                    <div class="search-area">
                        <input type="text" class="search-input" placeholder="搜索客户..." id="searchInput">
                        <button class="search-btn" id="searchBtn"><i class="fas fa-search"></i> 搜索</button>
                        <button class="add-btn" id="addBtn"><i class="fas fa-plus"></i> 添加客户</button>
                    </div>
                    
                    <div class="data-table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>客户编号</th>
                                    <th>客户姓名</th>
                                    <th>身份证号</th>
                                    <th>联系电话</th>
                                    <th>联系地址</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="customerTable">
                                <tr>
                                    <td>1001</td>
                                    <td>张三</td>
                                    <td>111111111111111111</td>
                                    <td>111111111</td>
                                    <td>辽宁大连</td>
                                    <td>
                                        <button class="action-btn edit-btn"><i class="fas fa-edit"></i> 编辑</button>
                                        <button class="action-btn delete-btn"><i class="fas fa-trash"></i> 删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1002</td>
                                    <td>李</td>
                                    <td>22222222222222</td>
                                    <td>2222222</td>
                                    <td>辽宁沈阳</td>
                                    <td>
                                        <button class="action-btn edit-btn"><i class="fas fa-edit"></i> 编辑</button>
                                        <button class="action-btn delete-btn"><i class="fas fa-trash"></i> 删除</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>1003</td>
                                    <td>王</td>
                                    <td>333333333333333333</td>
                                    <td>3333333333</td>
                                    <td>河北邯郸</td>
                                    <td>
                                        <button class="action-btn edit-btn"><i class="fas fa-edit"></i> 编辑</button>
                                        <button class="action-btn delete-btn"><i class="fas fa-trash"></i> 删除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="pagination">
                        <button class="page-btn active">1</button>
                        <button class="page-btn">2</button>
                        <button class="page-btn">3</button>
                        <span>...</span>
                        <button class="page-btn">10</button>
                    </div>
                </div>
                
                <!-- 客户页面：账户概览 -->
                <div id="accountDashboard" class="hidden">
                    <h2 class="page-title"><i class="fas fa-home"></i> 账户概览</h2>
                    
                    <div class="customer-dashboard">
                        <h3>欢迎，<span id="customerNameDisplay">张</span>！</h3>
                        
                        <div class="account-card">
                            <div class="account-type">储蓄账户</div>
                            <div class="account-number">6225 8812 3456 7890</div>
                            <div class="account-balance">¥ 85,430.50</div>
                            <div class="account-info">
                                <div>开户日期：2023-01-15</div>
                                <div>账户状态：正常</div>
                            </div>
                        </div>
                        
                        <div class="operation-buttons">
                            <button class="operation-btn" data-operation="deposit">
                                <i class="fas fa-money-bill-wave"></i>
                                <span>存款</span>
                            </button>
                            <button class="operation-btn" data-operation="withdraw">
                                <i class="fas fa-hand-holding-usd"></i>
                                <span>取款</span>
                            </button>
                            <button class="operation-btn" data-operation="transfer">
                                <i class="fas fa-exchange-alt"></i>
                                <span>转账</span>
                            </button>
                            <button class="operation-btn" data-operation="history">
                                <i class="fas fa-history"></i>
                                <span>交易记录</span>
                            </button>
                            <button class="operation-btn" data-operation="manage">
                                <i class="fas fa-cog"></i>
                                <span>账户管理</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 其他页面内容... -->
            </div>
        </div>
    </div>

    <script>
        // ===== 用户数据模拟 =====
        const userDatabase = {
            // 管理员账户
            admin: {
                username: "admin",
                password: "admin123",
                role: "admin",
                name: "系统管理员",
                avatar: "A"
            },
            // 客户账户
            customer1: {
                username: "zhang",
                password: "z123456",
                role: "customer",
                name: "张",
                avatar: "张",
                accounts: [
                    { number: "6225881234567890", balance: 85430.50, type: "储蓄账户", openDate: "2023-01-15" }
                ]
            },
            customer2: {
                username: "li",
                password: "l12345",
                role: "customer",
                name: "李",
                avatar: "李",
                accounts: [
                    { number: "6225886790123456", balance: 125600.20, type: "储蓄账户", openDate: "2022-11-23" }
                ]
            }
        };

        // ===== DOM元素 =====
        const loginContainer = document.getElementById('loginContainer');
        const mainSystem = document.getElementById('mainSystem');
        const adminTab = document.getElementById('adminTab');
        const customerTab = document.getElementById('customerTab');
        const usernameInput = document.getElementById('username');
        const passwordInput = document.getElementById('password');
        const loginBtn = document.getElementById('loginBtn');
        const logoutBtn = document.getElementById('logoutBtn');
        const usernameError = document.getElementById('usernameError');
        const passwordError = document.getElementById('passwordError');
        const userAvatar = document.getElementById('userAvatar');
        const userName = document.getElementById('userName');
        const roleTitle = document.getElementById('roleTitle');
        const sideMenu = document.getElementById('sideMenu');
        const customerNameDisplay = document.getElementById('customerNameDisplay');

        // ===== 全局变量 =====
        let currentUser = null;
        let currentRole = 'admin'; // 默认管理员登录

        // ===== 角色切换 =====
        adminTab.addEventListener('click', function() {
            adminTab.classList.add('active');
            customerTab.classList.remove('active');
            currentRole = 'admin';
            usernameInput.placeholder = "请输入管理员用户名";
        });

        customerTab.addEventListener('click', function() {
            customerTab.classList.add('active');
            adminTab.classList.remove('active');
            currentRole = 'customer';
            usernameInput.placeholder = "请输入客户用户名";
        });

        // ===== 登录功能 =====
        loginBtn.addEventListener('click', function() {
            const username = usernameInput.value.trim();
            const password = passwordInput.value.trim();
            
            // 重置错误提示
            usernameError.style.display = 'none';
            passwordError.style.display = 'none';
            
            // 验证输入
            if (!username) { 
                usernameError.textContent = '用户名不能为空';
                usernameError.style.display = 'block';
                return;
            }
            
            if (!password) {
                passwordError.textContent = '密码不能为空';
                passwordError.style.display = 'block';
                return;
            }
            
            // 查找用户
            const user = Object.values(userDatabase).find(
                u => u.username === username && u.password === password
            );
            
            if (!user) {
                usernameError.textContent = '用户名或密码错误';
                usernameError.style.display = 'block';
                return;
            }
            
            // 检查角色匹配
            if ((currentRole === 'admin' && user.role !== 'admin') || 
                (currentRole === 'customer' && user.role !== 'customer')) {
                usernameError.textContent = '该账户无权登录此系统';
                usernameError.style.display = 'block';
                return;
            }
            
            // 登录成功
            currentUser = user;
            
            // 更新用户界面
            userAvatar.textContent = user.avatar;
            userName.textContent = user.name;
            
            // 根据角色更新菜单
            updateMenuForRole(user.role);
            
            // 显示主系统
            loginContainer.classList.add('hidden');
            mainSystem.style.display = 'block';
            
            // 更新客户名称显示
            if (user.role === 'customer') {
                customerNameDisplay.textContent = user.name;
            }
        });

        // ===== 更新菜单根据角色 =====
        function updateMenuForRole(role) {
            // 更新角色标题
            roleTitle.innerHTML = `<i class="fas fa-${role === 'admin' ? 'user-cog' : 'user'}"></i> ${role === 'admin' ? '管理员' : '客户'}模块`;
            
            // 显示/隐藏菜单项
            const menuItems = document.querySelectorAll('.menu li');
            menuItems.forEach(item => {
                const roleSpecific = item.getAttribute('data-role');
                if (roleSpecific) {
                    item.classList.toggle('hidden', roleSpecific !== role);
                }
            });
            
            // 激活第一个菜单项
            const firstMenuItem = document.querySelector(`.menu li:not(.hidden) a`);
            if (firstMenuItem) {
                // 移除所有活动状态
                document.querySelectorAll('.menu a').forEach(a => a.classList.remove('active'));
                // 添加活动状态
                firstMenuItem.classList.add('active');
                
                // 显示对应页面
                showPage(firstMenuItem.getAttribute('data-page'));
            }
        }

        // ===== 显示页面函数 =====
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.content > div').forEach(div => {
                div.classList.add('hidden');
            });
            
            // 显示目标页面
            const targetPage = document.getElementById(pageId);
            if (targetPage) {
                targetPage.classList.remove('hidden');
            }
        }

        // ===== 菜单点击事件 =====
        sideMenu.addEventListener('click', function(e) {
            if (e.target.tagName === 'A') {
                e.preventDefault();
                
                // 移除所有活动状态
                document.querySelectorAll('.menu a').forEach(a => a.classList.remove('active'));
                
                // 添加活动状态到当前菜单项
                e.target.classList.add('active');
                
                // 显示对应页面
                const pageId = e.target.getAttribute('data-page');
                showPage(pageId);
            }
        });

        // ===== 退出功能 =====
        logoutBtn.addEventListener('click', function() {
            if (confirm('确定要退出系统吗？')) {
                // 重置登录表单
                usernameInput.value = '';
                passwordInput.value = '';
                
                // 显示登录界面
                mainSystem.style.display = 'none';
                loginContainer.classList.remove('hidden');
                
                // 重置菜单
                adminTab.click();
            }
        });

        // ===== 客户操作按钮事件 =====
        document.querySelector('.operation-buttons')?.addEventListener('click', function(e) {
            if (e.target.closest('.operation-btn')) {
                const operation = e.target.closest('.operation-btn').getAttribute('data-operation');
                alert(`执行操作: ${operation}`);
                
                // 在实际应用中，这里会打开对应的操作页面
            }
        });

        // ===== 表格操作按钮事件 (事件委托) =====
        document.getElementById('customerTable')?.addEventListener('click', function(e) {
            const row = e.target.closest('tr');
            if (!row) return;
            
            if (e.target.classList.contains('edit-btn')) {
                // 编辑按钮逻辑
                const cells = row.querySelectorAll('td');
                const customerData = {
                    id: cells[0].textContent,
                    name: cells[1].textContent,
                    idNumber: cells[2].textContent,
                    phone: cells[3].textContent,
                    address: cells[4].textContent
                };
                
                // 在实际应用中，这里会打开编辑表单
                alert(`编辑客户: ${customerData.name}`);
            }
            else if (e.target.classList.contains('delete-btn')) {
                // 删除按钮逻辑
                if (confirm('确定要删除此客户吗？')) {
                    row.remove();
                    alert('客户已删除');
                }
            }
        });

        // ===== 添加客户按钮事件 =====
        document.getElementById('addBtn')?.addEventListener('click', function() {
            // 在实际应用中，这里会打开添加客户表单
            alert('添加新客户');
        });

        // ===== 搜索按钮事件 =====
        document.getElementById('searchBtn')?.addEventListener('click', function() {
            const searchTerm = document.getElementById('searchInput').value.trim().toLowerCase();
            if (searchTerm === '') {
                alert('请输入搜索内容');
                return;
            }
            
            const rows = document.querySelectorAll('#customerTable tr');
            let found = false;
            
            rows.forEach(row => {
                const cells = row.querySelectorAll('td');
                let rowContainsTerm = false;
                
                // 检查除操作列外的所有单元格
                for (let i = 0; i < cells.length - 1; i++) {
                    if (cells[i].textContent.toLowerCase().includes(searchTerm)) {
                        rowContainsTerm = true;
                        break;
                    }
                }
                
                if (rowContainsTerm) {
                    row.style.display = '';
                    found = true;
                } else {
                    row.style.display = 'none';
                }
            });
            
            if (!found) {
                alert('未找到匹配的客户');
            }
        });

        // ===== 初始化页面 =====
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认登录状态
            adminTab.click();
        });
    </script>
</body>
</html>